<template>
  <div class="resultall">
    <h1 ref="a987">搜索结果</h1>
    <el-row>
      <el-col :span="12">
        <div v-for="(item, i) in left" :key="i" class="onerow">
          <a href="#" @click.prevent="goplay(1, item.id)" v-if="type == 1">
            <span v-if="i < 10">0{{ i + 1 }}、</span>
            <span v-else>{{ i + 1 }}、</span>
            《{{ item.name }}》-----{{ item.id }}-----{{ item.ar[0].name }}
          </a>
          <a href="#" @click.prevent="goplay(2, item.id)" v-else>
            <span v-if="i < 10">0{{ i + 1 }}、</span>
            <span v-else>{{ i + 1 }}、</span>
            《{{ item.name }}》-----{{ item.id }}-----{{ item.artists[0].name }}
          </a>
        </div>
      </el-col>
      <el-col :span="12">
        <div v-for="(item, i) in right" :key="i + 15" class="onerow">
          <a href="#" @click.prevent="goplay(1, item.id)" v-if="type == 1">
            {{ i + 16 }}、《{{ item.name }}》-----{{ item.id }}-----{{
              item.al.name
            }}
          </a>
          <a href="#" @click.prevent="goplay(2, item.id)" v-else>
            {{ i + 16 }}、《{{ item.name }}》-----{{ item.id }}-----{{
              item.artists[0].name
            }}
          </a>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 1,
      left: [],
      right: [],
    };
  },
  computed: {},
  watch: {
    "$store.state.Publiccomponent.searchResult": function () {
      this.init();
    },
  },

  methods: {
    init() {
      // 先查看是否vuex有，如有则调取数据，此项是为了解决去别的页面再返回本页面的问题，如果没有直接返回home页面
      if (this.$store.state.Publiccomponent.searchResult) {
        // 搜索的是歌曲
        if (this.$route.params.type == 1) {
          this.type = 1;
          this.left = this.$store.state.Publiccomponent.searchResult.slice(
            0,
            15
          );
          this.right = this.$store.state.Publiccomponent.searchResult.slice(
            15,
            31
          );
          console.log("left", this.left);
          console.log("right", this.right);
        } else {
          // 搜索的是mv
          this.type = 2;
          console.log(this.$store.state.Publiccomponent.searchResult);
          this.left = this.$store.state.Publiccomponent.searchResult.slice(
            0,
            15
          );
          this.right = this.$store.state.Publiccomponent.searchResult.slice(
            15,
            31
          );
          console.log("left", this.left);
          console.log("right", this.right);
        }
      } else {
        this.$router.push("/home");
      }
    },
    goplay(gotype, id) {
      // 跳转播放
      if (gotype == 1) {
        this.$router.push("/home/play/" + id);
      }
      // 跳转播mv
      else {
        this.$router.push("/home/playVideo/" + id);
      }
    },
  },
  created() {
    this.init();
  },
  mounted() {
    this.$refs.a987.style.color = "#f00";
    // console.log();
  },
  components: {},
};
</script>
<style scoped>
.resultall h1 {
  color: #69b1a2;
  height: 50px;
  line-height: 50px;
  font-size: 30px;
}
.onerow {
  text-align: left;
  margin-top: 20px;
}
</style>
